<template>
  <div class="parking-detail" v-loading="loading">
    <div class="page-header">
      <el-page-header @back="goBack" :title="parkingLot?.name" />
    </div>

    <div class="detail-content" v-if="parkingLot">
      <el-row :gutter="20">
        <!-- 左侧信息 -->
        <el-col :span="16">
          <el-card class="info-card">
            <div class="parking-images">
              <el-carousel height="400px">
                <el-carousel-item v-for="(image, index) in parkingLot.images" :key="index">
                  <el-image :src="image" fit="cover" />
                </el-carousel-item>
              </el-carousel>
            </div>

            <div class="parking-info">
              <h2>{{ parkingLot.name }}</h2>
              <div class="info-item">
                <el-icon><Location /></el-icon>
                <span>{{ parkingLot.address }}</span>
              </div>
              <div class="info-item">
                <el-icon><Timer /></el-icon>
                <span>营业时间：{{ parkingLot.businessHours }}</span>
              </div>
              <div class="info-item">
                <el-icon><InfoFilled /></el-icon>
                <span>总车位：{{ parkingLot.totalSpaces }}个</span>
                <span class="available">剩余：{{ parkingLot.availableSpaces }}个</span>
              </div>
            </div>

            <el-divider />

            <div class="parking-rates">
              <h3>收费标准</h3>
              <div class="rate-item">
                <span class="label">小时费率：</span>
                <span class="value">¥{{ parkingLot.hourlyRate }}/小时</span>
              </div>
              <div class="rate-item">
                <span class="label">日费率：</span>
                <span class="value">¥{{ parkingLot.dailyRate }}/天</span>
              </div>
              <div class="rate-item">
                <span class="label">月费率：</span>
                <span class="value">¥{{ parkingLot.monthlyRate }}/月</span>
              </div>
            </div>

            <el-divider />

            <div class="parking-facilities">
              <h3>配套设施</h3>
              <div class="facilities-list">
                <el-tag 
                  v-for="facility in parkingLot.facilities" 
                  :key="facility"
                  class="facility-tag"
                >
                  {{ facility }}
                </el-tag>
              </div>
            </div>

            <el-divider />

            <div class="parking-rules">
              <h3>停车须知</h3>
              <div class="rules-list">
                <p v-for="(rule, index) in parkingLot.rules" :key="index">
                  {{ index + 1 }}. {{ rule }}
                </p>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 右侧操作 -->
        <el-col :span="8">
          <el-card class="action-card">
            <template #header>
              <div class="card-header">
                <span>停车操作</span>
                <el-tag :type="parkingLot.availableSpaces > 0 ? 'success' : 'danger'">
                  {{ parkingLot.availableSpaces > 0 ? '有空位' : '已满' }}
                </el-tag>
              </div>
            </template>

            <div class="action-content">
              <div class="info-item">
                <span class="label">所需信用分：</span>
                <span class="value">{{ requiredCreditScore }}分</span>
              </div>
              <div class="info-item">
                <span class="label">当前信用分：</span>
                <span class="value">{{ userCreditScore }}分</span>
              </div>

              <el-button 
                type="primary" 
                size="large" 
                class="action-button"
                :disabled="!canPark"
                @click="handleStartParking"
              >
                开始停车
              </el-button>

              <div class="tips">
                <p v-if="!canPark" class="warning">
                  {{ getWarningMessage() }}
                </p>
                <p class="tip">* 请确保车辆已停入指定车位</p>
                <p class="tip">* 请保管好随身物品</p>
              </div>
            </div>
          </el-card>

          <el-card class="map-card">
            <template #header>
              <div class="card-header">
                <span>位置信息</span>
              </div>
            </template>
            <div class="map-container">
              <!-- 这里可以集成地图组件 -->
              <div class="map-placeholder">
                <el-icon><Location /></el-icon>
                <span>地图加载中...</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Location, Timer, InfoFilled } from '@element-plus/icons-vue'
import { getParkingLot, startParking, getRequiredCreditScore } from '@/api/parking'
import { getUserCreditScore } from '@/api/user'

export default {
  name: 'ParkingDetail',
  components: {
    Location,
    Timer,
    InfoFilled
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const loading = ref(false)
    const parkingLot = ref(null)
    const requiredCreditScore = ref(0)
    const userCreditScore = ref(0)

    const canPark = computed(() => {
      return parkingLot.value?.availableSpaces > 0 && userCreditScore.value >= requiredCreditScore.value
    })

    const loadParkingLot = async () => {
      loading.value = true
      try {
        const id = route.params.id
        const [lotResponse, scoreResponse] = await Promise.all([
          getParkingLot(id),
          getRequiredCreditScore()
        ])
        parkingLot.value = lotResponse
        requiredCreditScore.value = scoreResponse.score
      } catch (error) {
        ElMessage.error('获取停车场信息失败')
      } finally {
        loading.value = false
      }
    }

    const loadUserCreditScore = async () => {
      try {
        const response = await getUserCreditScore()
        userCreditScore.value = response.score
      } catch (error) {
        ElMessage.error('获取用户信用分失败')
      }
    }

    const handleStartParking = async () => {
      try {
        await startParking(parkingLot.value.id)
        ElMessage.success('开始停车成功')
        router.push('/parking/records')
      } catch (error) {
        ElMessage.error(error.message || '开始停车失败')
      }
    }

    const getWarningMessage = () => {
      if (parkingLot.value?.availableSpaces <= 0) {
        return '当前停车场已满'
      }
      if (userCreditScore.value < requiredCreditScore.value) {
        return `信用分不足，需要${requiredCreditScore.value}分`
      }
      return ''
    }

    const goBack = () => {
      router.back()
    }

    onMounted(() => {
      loadParkingLot()
      loadUserCreditScore()
    })

    return {
      loading,
      parkingLot,
      requiredCreditScore,
      userCreditScore,
      canPark,
      handleStartParking,
      getWarningMessage,
      goBack
    }
  }
}
</script>

<style scoped>
.parking-detail {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.detail-content {
  margin-top: 20px;
}

.info-card {
  margin-bottom: 20px;
}

.parking-images {
  margin-bottom: 20px;
}

.parking-info {
  margin-bottom: 20px;
}

.parking-info h2 {
  margin: 0 0 15px 0;
  font-size: 24px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #666;
}

.info-item .el-icon {
  margin-right: 8px;
  font-size: 18px;
}

.available {
  margin-left: 20px;
  color: #67c23a;
}

.parking-rates,
.parking-facilities,
.parking-rules {
  margin-bottom: 20px;
}

.parking-rates h3,
.parking-facilities h3,
.parking-rules h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
}

.rate-item {
  display: flex;
  margin-bottom: 10px;
}

.rate-item .label {
  width: 100px;
  color: #666;
}

.rate-item .value {
  color: #f56c6c;
  font-weight: bold;
}

.facilities-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.facility-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}

.rules-list p {
  margin: 10px 0;
  color: #666;
  line-height: 1.6;
}

.action-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-content {
  text-align: center;
}

.action-button {
  width: 100%;
  margin: 20px 0;
}

.tips {
  text-align: left;
  color: #666;
}

.tips .warning {
  color: #f56c6c;
  margin-bottom: 10px;
}

.tips .tip {
  margin: 5px 0;
  font-size: 14px;
}

.map-card {
  margin-bottom: 20px;
}

.map-container {
  height: 300px;
  background-color: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: center;
}

.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #909399;
}

.map-placeholder .el-icon {
  font-size: 48px;
  margin-bottom: 10px;
}
</style> 